<template>
  <div class="container">
    <Breadcrumb
      :items="[
        'menu.goods',
        `商品管理 - ${store.form?.id ? `编辑商品` : `新建商品`}`,
      ]"
    />

    <a-card
      class="general-card"
      body-style="padding:0"
      header-style="padding:10px"
    >
      <template #title>
        <a-row>
          <a-button type="text" @click="store.back"
            >返回
            <template #icon>
              <icon-left />
            </template>
          </a-button>
          <a-divider style="height: 32px" direction="vertical" />
          <div class="arco-card-header-title" :style="{ margin: 'auto 0' }">
            {{ store.form?.id ? `编辑商品` : `新建商品` }}
          </div>
        </a-row>
      </template>
    </a-card>

    <a-card :style="{ marginTop: '16px' }">
      <a-form
        ref="formRef"
        :model="store.form"
        :rules="store.rules"
        @submit="store.save"
        auto-label-width
      >
        <Step v-model:list="store.step" v-model:index="store.stepIndex">
          <template #基础信息>
            <a-form-item
              field="goods_type_id"
              label="商品分类"
              group="基础信息"
            >
              <a-select
                ref="focusRef"
                v-model="store.form.goods_type_id"
                :style="{ width: '360px' }"
                placeholder="请选择商品分类"
                multiple
                allow-clear
                :options="store.typeOptions"
              />
            </a-form-item>

            <a-form-item field="title" label="商品名称">
              <a-input
                v-model="store.form.title"
                placeholder="请输入商品名称"
              />
            </a-form-item>
            <a-form-item field="synopsis" label="商品简介">
              <a-input
                v-model="store.form.synopsis"
                placeholder="请输入商品简介"
              />
            </a-form-item>
            <a-form-item field="unit" label="单位">
              <a-input v-model="store.form.unit" placeholder="请输入单位" />
            </a-form-item>
            <a-form-item label="添加视频">
              <a-switch
                v-model="store.form.isAddVideo"
                :checked-value="1"
                :unchecked-value="0"
              />
            </a-form-item>
            <a-form-item
              field="video"
              label="商品视频"
              validate-trigger="blur"
              v-if="store.form.isAddVideo"
            >
              <UploadVideo v-model="store.form.video" />
            </a-form-item>
            <a-row justify="space-between" :wrap="false" :gutter="24">
              <a-col :span="4">
                <a-form-item
                  field="img"
                  label="商品图片"
                  validate-trigger="blur"
                >
                  <Upload v-model="store.form.img" :limit="1" />
                </a-form-item>
              </a-col>
              <a-col :span="20">
                <a-form-item
                  field="imgs"
                  label="轮播图"
                  validate-trigger="blur"
                >
                  <Upload v-model="store.form.imgs" multiple /> </a-form-item
              ></a-col>
            </a-row>
            <a-form-item field="status" label="状态">
              <a-radio-group
                v-model="store.form.status"
                :options="[
                  { label: '上架', value: 1 },
                  { label: '下架', value: 0 },
                ]"
              >
              </a-radio-group>
            </a-form-item>
          </template>
          <template #规格库存>
            <a-form-item field="type" label="商品规格">
              <a-radio-group
                v-model="store.form.type"
                :options="[
                  { label: '单规格', value: 1 },
                  { label: '多规格', value: 0 },
                ]"
              >
              </a-radio-group>
            </a-form-item>
            <template v-if="store.form.type">
              <a-form-item field="price" label="售价">
                <a-input-number
                  v-model="store.form.price"
                  placeholder="请输入售价"
                  :min="0"
                  :precision="2"
                />
              </a-form-item>
              <a-form-item field="original_price" label="原价">
                <a-input-number
                  v-model="store.form.original_price"
                  placeholder="请输入原价"
                  :precision="2"
                  :min="0"
                />
              </a-form-item>
              <a-form-item field="stock" label="库存">
                <a-input-number
                  v-model="store.form.stock"
                  placeholder="请输入库存"
                  :min="0"
                />
              </a-form-item>
            </template>
            <template v-else>
              <a-form-item field="norm" label="规格">
                <Norm
                  v-model="store.form.norm"
                  v-model:arr="store.form.norm_arr"
                  :model="{
                    name: '',
                    value: [],
                  }"
                />
              </a-form-item>
            </template>
          </template>
          <template #商品详情>
            <a-form-item field="content" label="商品详情">
              <Ueditor v-model="store.form.content" />
            </a-form-item>
          </template>
          <template #产品参数>
            <a-form-item field="params" label="产品参数">
              <Ueditor v-model="store.form.params" />
            </a-form-item>
          </template>
          <template #物流设置>
            <a-form-item field="shipping_address" label="发货地址">
              <a-input
                v-model="store.form.shipping_address"
                placeholder="请输入发货地址"
              />
            </a-form-item>
            <a-form-item field="courier_fee" label="运费">
              <a-input-number
                v-model="store.form.courier_fee"
                placeholder="请输入运费"
                :min="0"
                :precision="2"
              />
            </a-form-item>
          </template>
          <template #营销设置>
            <a-form-item field="sort" label="排序">
              <a-input-number v-model="store.form.sort" />
            </a-form-item>
            <a-form-item field="sold" label="已售数量">
              <a-input-number v-model="store.form.sold" />
            </a-form-item>
            <a-form-item field="recommend" label="商品推荐">
              <a-checkbox-group
                v-model="store.form.recommend"
                :options="store.recommendOptions"
              />
            </a-form-item>
            <a-form-item field="keyword" label="关键字">
              <a-input
                v-model="store.form.keyword"
                placeholder="请输入关键字"
              />
            </a-form-item>
          </template>
          <template #submit>
            <a-button html-type="submit" type="primary">保存</a-button>
          </template>
        </Step>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useGoodsStore } from '@/store/index';
  import { savetData, deltData } from './api';

  const store = useGoodsStore();
  // console.log(store);
  const formRef = ref();
  onMounted(() => {
    store.formRef = formRef.value;
  });
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }
  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }
  .setting {
    display: flex;
    align-items: center;
    width: 200px;
    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
</style>
